<template>
	<view>
		<view class="selectcity-style" v-for="item in newtitlearr" :key="item.title">
			<view class="selectcity-title">{{item.title}}</view>
			
			<view class="selectcity-arr" v-for="val in item.children" :key="val.city_name">
				<view>{{val.city_name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newtitlearr:[]
			}
		},
		onLoad(){
			uni.request({
				url:"http://129.211.169.131:6368/citys",
				success: (res) => {
					// console.log(res.data)
					
					// city_name: "上海"
					// city_pinyin: "Shanghai"
					// city_pre: "S"
					// city_short: "sh"
					// count: "316"
					// id: "1"
					
					// 获取所有的title
					let citytitle = res.data.map(item => item.city_pre.toUpperCase())
					citytitle = [...new Set(citytitle)].sort()
					// console.log(citytitle)
					
					// [title:"A",children:[]]
					let titlearr = citytitle.map( str => {
						return {title:str,children:[]}
					})
					console.log(titlearr)
					
					// 处经理
					
					for(let value of res.data){
						value.city_pre = value.city_pre.toUpperCase()
						
						for(let val of titlearr){
							if(val.title == value.city_pre){
								val.children.push(value)
							}
						}
					}
					
					this.newtitlearr = titlearr
					// console.log(titlearr)
				}
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.selectcity-style{
		.selectcity-title{
			line-height: 30px;
			background-color: #eaeaea;
			padding: 0 10px;
		}
		.selectcity-arr{
			
			background-color: #fff;
			view{
				line-height: 40px;
				border-bottom: 1px solid #eaeaea;
				padding: 0 20px;
			}
		}
	}

</style>
